<template>
  <div class="sm-header-right-time">
    {{ fullTimer }}
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from "vue";
import { getTodayTime, getTime, getTodayWeek } from "@/utils/time";
let threader;
const timer = ref("");
const fullDate = ref("");
const fullWeek = ref("");

const fullTimer = computed(() => {
  return fullDate.value + " " + fullWeek.value + " " + timer.value;
});

const runTimer = () => {
  timer.value = getTime();
  fullWeek.value = getTodayWeek();
  fullDate.value = getTodayTime("yyyy-MM-dd");
};
onMounted(() => {
  runTimer();
  timerThreader();
});

const timerThreader = () => {
  threader = setInterval(() => {
    runTimer();
  }, 1000);
};

onUnmounted(() => {
  if (threader) window.clearInterval(threader);
});
</script>
<style lang="less" scoped>
.sm-header-left-time {
  cursor: pointer;

  .sm-header-right-time {
    cursor: pointer;
  }
}
</style>
